<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view>
    <!-- 1. 最近练习详情 和 题库详情 -->
    <view class="p-24rpx" v-if="state.page === 'details'">
      <wd-navbar
        safeAreaInsetTop
        left-arrow
        :title="state.title"
        @click-left="handleClickLeft"
      ></wd-navbar>
      <!-- 最近练习详情 -->
      <view class="recent divStyle">
        <view class="title">
          <text>最近练习详情</text>
          <wd-button plain size="small" @click="handlePractice({ name: '错题巩固' })">
            错题巩固
          </wd-button>
        </view>
        <view>
          <view>
            <text>{{ state.recentInfo.answerCount || 0 }}</text>
            <text>答题数</text>
          </view>
          <view>
            <text>{{ state.recentInfo.wrongCount || 0 }}</text>
            <text>错题数</text>
          </view>
          <view>
            <text>{{ (state.recentInfo.accuracy * 100).toFixed(2) || 0 }}%</text>
            <text>正确率</text>
          </view>
        </view>
      </view>
      <!-- 题库详情 -->
      <view class="details divStyle">
        <view class="title">
          <text>题库详情</text>
        </view>
        <view class="list" v-if="state.detailsList.length > 0">
          <view
            v-for="(item, index) in state.detailsList"
            :key="index"
            class="item"
            @click="handlePractice(item)"
          >
            <view>
              <text>{{ item.name }}</text>
              <text>
                <wd-icon name="chevron-right-circle" size="26rpx"></wd-icon>
                {{ item.isAdd ? '继续' : '开始' }}练习
              </text>
            </view>
            <view>
              <view>
                <text class="progress">
                  进度：
                  <text>{{ item.currentprogress }}/{{ item.totalProgress }}</text>
                </text>
                <text class="accuracy">
                  正确率：
                  <text>{{ item.correctRate }}%</text>
                </text>
              </view>
              <wd-progress
                :percentage="Number(item.correctRate)"
                color="#3670F7"
                hide-text
              ></wd-progress>
            </view>
          </view>
        </view>
        <!-- 暂无数据 -->
        <view class="empty" v-else>
          <wd-status-tip :image="emptyImage" tip="暂无数据" />
        </view>
      </view>
      <!-- 返回 -->
      <!-- <wd-button plain size="small" class="w-full mt-40rpx" @click="handleBack">返回</wd-button> -->
    </view>
    <!-- 2. 开始练习/继续练习 -->
    <Practice
      v-else
      :practice-info="state.practiceInfo"
      @back="state.page = 'details'"
      @reload="handleReload"
    />
  </view>
</template>

<script setup lang="ts">
/* 引入 开始练习/继续练习 组件 */
import Practice from '../practice/index.vue'

/* 引入 方法 - 获取字典 */
import { getDictValue } from '@/utils/dict'

/* 引入 接口 */
import {
  getTeacherQuCountApi,
  getPublicQuCountApi,
  getRecentInfoApi,
} from '@/service/edu/question/index'

/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'

/* 定义接口 - 最近练习详情 */
interface recentInfoIF {
  answerCount: number // 答题数
  wrongCount: number // 错题数
  accuracy: number // 正确率
}

/* 定义接口 - 题库详情 - 每个卡片 */
interface ItemData {
  name: string
  num: number | string
  currentprogress: number | string
  totalProgress: number | string
  correctRate: number
}

/* 定义数据 */
const state = reactive<{
  page: string
  title: string
  repoId: string
  type: number
  recentInfo: recentInfoIF
  detailsList: any[]
  practiceInfo: any
}>({
  /* 当前页面/组件 */
  page: 'details',
  /* 导航栏标题 */
  title: '',
  /* 题库id */
  repoId: '',
  /* 老师题库 or 公共题库 */
  type: 0,
  /* 最近练习详情 */
  recentInfo: {
    answerCount: 0,
    wrongCount: 0,
    accuracy: 0,
  },
  /* 题库详情列表 */
  detailsList: [],
  /* 开始练习/继续练习 - 所需参数 */
  practiceInfo: {},
})

onLoad(async (query) => {
  const { title, repoId, type } = query
  state.repoId = repoId
  state.type = type
  state.title = decodeURIComponent(title)
  if (state.repoId) {
    await getRecentInfo()
    await getData()
  }
})

/* 重新调取接口 - 当结束训练返回当前页面时 or 重新加载/进入此页面时 */
async function handleReload() {
  state.page = 'details'
  await getRecentInfo()
  await getData()
}

/* 顶部导航栏 - 返回 */
function handleClickLeft() {
  uni.navigateBack()
}

/* 获取 题库详情 - 列表数据 */
async function getData() {
  if (state.repoId) {
    const params = { repoId: state.repoId }
    const typeEnum = {
      0: getTeacherQuCountApi,
      1: getPublicQuCountApi,
    }
    try {
      const res = await typeEnum[state.type](params)
      if (res?.code === 200) {
        const { data = {} } = res || {}
        if (!data.transformedData.length) {
          state.detailsList = []
          return
        }
        /* 左侧数据 */
        const newData = data?.transformedData.map(
          ({ itemData }: { itemData: ItemData }) => itemData,
        )
        /* 右侧数据 */
        state.detailsList = newData.flat().filter((e) => {
          return !e.name.includes('错题')
        })
      }
    } catch (error) {
      console.error('获取题库详情失败:', error)
    }
  }
}

/* 获取 最近练习详情 */
async function getRecentInfo() {
  const params = { repoId: state.repoId }
  try {
    const res: any = await getRecentInfoApi(params)
    if (res?.code === 200) {
      state.recentInfo = res.data
    }
  } catch (error) {
    console.error('获取最近练习详情失败:', error)
  }
}

/* 开始练习/继续练习 */
async function handlePractice(item: any) {
  /* 练习模式 - 中文转字符串 - 字典转义 */
  const practiceMode = await getDictValue('practice_mode', item.name)
  state.practiceInfo = { ...item, practiceMode, repoId: state.repoId }
  state.page = 'practice'
}

/* 返回 */
async function handleBack() {
  uni.navigateTo({
    url: `/pages/question/index`,
  })
}
</script>

<style lang="scss" scoped>
/* 暂无数据 - 图片 */
:deep(.wd-status-tip__image) {
  width: 260rpx;
  height: 300rpx;
}
/* 标题 */
.title {
  padding-bottom: 16rpx;
  border-bottom: 0.6rpx solid #f2f2f2;
  border-bottom: solid 1rpx #e6e6e6;
  text {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-weight: 700;
    color: #3d3d3d;
  }

  text::before {
    display: inline-block;
    width: 6rpx;
    height: 32rpx;
    margin-right: 16rpx;
    content: '';
    background: #3670f7;
  }
}
/* 盒子公共样式 */
.divStyle {
  padding: 36rpx 20rpx;
  background: #fff;
  border-radius: 10rpx;
}
/* 按钮样式 */
.wd-button.is-plain {
  background: transparent;
}
/* 最近练习详情 */
.recent {
  & > view:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .wd-button {
      margin: 0;
    }
  }

  & > view:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35rpx 40rpx;

    & > view {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      align-items: center;

      text:nth-child(1) {
        font-size: 36rpx;
        font-weight: 500;
        color: #3d3d3d;
      }

      text:nth-child(2) {
        font-size: 26rpx;
        font-weight: normal;
        color: #3d3d3d;
      }
    }

    & > view:nth-child(3) {
      text:nth-child(1) {
        color: #3670f7;
      }
    }
  }
}
/* 题库详情 */
.details {
  position: relative;
  min-height: calc(100vh - 540rpx);
  margin-top: 20rpx;
  overflow-y: auto;
  background: #fff;
  /* 列表 */
  .list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-top: 20rpx;

    .item {
      padding: 40rpx 30rpx 20rpx;
      background: #f7f7f7;
      border-radius: 10rpx;

      & > view:nth-child(1) {
        text:nth-child(1) {
          font-size: 30rpx;
          font-weight: 700;
          color: #3d3d3d;
        }
        text:nth-child(2) {
          font-size: 26rpx;
          font-weight: 500;
          color: #1890ff;
        }
      }

      & > view:nth-child(2) {
        margin-top: 30rpx;

        view {
          font-size: 24rpx;
          color: #858585;
          .progress,
          .accuracy {
            text {
              color: #3670f7;
            }
          }
        }
        /* 进度条 */
        :deep(.wd-progress) {
          .wd-progress__outer,
          .wd-progress__inner {
            height: 16rpx;
            background: #c6efdf;
            border-radius: 10rpx;
          }
        }
      }
      /* stylelint-disable-next-line no-descending-specificity */
      & > view:nth-child(1),
      & > view:nth-child(2) view {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  /* 暂无数据 */
  .empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
